import './index.less'
import {selectCameras} from '@/api/videoSurveillance'
import {CnMediumSpan} from '@/components/text'
import {getStorage} from '@/libs/localstoreage'
import {filterOption} from '@/libs/toolkit'
import AddVedio from './components/addVedio'
import VedioPlay from './components/vedioPlay'
import {Card} from 'ant-design-vue'
import useGlobalAPI from '@/hooks/useGlobalAPI'

const VideoSurveillance = defineComponent({
  setup(props, ctx) {
    let {store, router} = useGlobalAPI()
    let currentCameraId = ref<number | undefined>(undefined)
    let vedioList = ref<Camera.Info[]>([])
    const currentCamera = computed(() =>
      vedioList.value.find(item => item.cameraId === currentCameraId.value)
    )
    function getPageDataSource() {
      let userId = getStorage('userId')
      if (userId) {
        selectCameras({userId})
          .then(res => {
            if (res.data.length && currentCameraId.value === undefined) {
              currentCameraId.value = res.data[0].cameraId
            } else if (currentCameraId.value !== undefined) {
              let idx = res.data.findIndex(item => item.cameraId === currentCameraId.value)
              if (idx === -1) currentCameraId.value = res.data[0].cameraId
            }
            vedioList.value = res.data
          })
          .catch(err => {
            vedioList.value = []
          })
      }
    }

    onMounted(() => {
      getPageDataSource()
    })

    return () => (
      <div>
        <Card style='width: 100%;height:100%;position:reactive'>
          <div class='flex items-center gap-x-16'>
            <CnMediumSpan>选择摄像头</CnMediumSpan>
            <a-select
              class='w-240'
              v-model={[currentCameraId.value, 'value']}
              fieldNames={{
                label: 'cameraName',
                value: 'cameraId'
              }}
              options={vedioList.value}
              show-search
              filterOption={filterOption}
            ></a-select>
            <AddVedio onSuccess={getPageDataSource}></AddVedio>
            <a-button
              type='primary'
              onClick={() => {
                router.push({
                  path: '/cameraCoordinate/home'
                })
              }}
            >
              坐标管理
            </a-button>
          </div>
        </Card>

        {currentCamera.value ? (
          <Card style='width: 100%;height:76vh;margin-top:10px'>
            <div class=' flex '>
              {currentCamera.value ? (
                <VedioPlay
                  id='myPlayer'
                  option={currentCamera.value}
                  onSuccess={() => {
                    getPageDataSource()
                  }}
                ></VedioPlay>
              ) : null}
              {/* <VedioPlay id='myPlayer2' url='ezopen://open.ys7.com/K03575413/10.hd.live'></VedioPlay> */}
              {/* <VedioPlay id='myPlayer3' url='ezopen://open.ys7.com/K03575413/11.hd.live'></VedioPlay> */}
              {/* <VedioPlay id='myPlayer4' url='ezopen://open.ys7.com/K03575413/13.hd.live'></VedioPlay> */}
              {/* <VedioPlay id='myPlayer5' url='ezopen://open.ys7.com/K03575413/12.hd.live'></VedioPlay> */}
            </div>
          </Card>
        ) : null}
      </div>
    )
  }
})

export default VideoSurveillance
